<!--
 * @Author: sbotlp
 * @Email: sbotlp@sina.com
 * @Date: 2020-10-31 21:40:30
 * @LastEditTime: 2020-10-31 22:35:31
 * @Description: http://www.sbotlp.com.cn
-->
<template>
  <a-config-provider :locale="locale">
    <a-layout id="components-layout-demo-top"
              class="layout">
      <a-layout-header>
        <div class="logo" />
        <a-menu theme="dark"
                mode="horizontal"
                v-model:selectedKeys="selectedKeys"
                :style="{ lineHeight: '64px' }">
          <a-menu-item key="/">
            <router-link to="/">首页</router-link>
          </a-menu-item>
          <a-menu-item key="/plan">
            <router-link to="/plan">时间计划</router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout-content style="padding: 0 50px">
        <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
          <a-row>
            <a-col :span="6">
              <a-card title="计划总用时"
                      style="width:100%">
                <p>总共时长是:{{allTime}}</p>
              </a-card>
            </a-col>
            <a-col :span="16"
                   :offset="2">
              <router-view></router-view>
            </a-col>
          </a-row>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        <span @click="msgClick">{{msg}}</span>
      </a-layout-footer>
    </a-layout>
  </a-config-provider>
</template>
<script lang="ts">
  import {
    defineComponent,
    reactive,
    toRefs,
    computed,
    watch,
    onMounted
  } from "vue";
  import { useRoute } from "vue-router";
  import { useStore } from "vuex";
  import * as types from "@/store/action.type";
  import zhCN from "ant-design-vue/es/locale/zh_CN";
  import { IGlobalState } from "@/store/index";
  interface IState {
    selectedKeys: String[];
    allTime: number;
    locale: Object;
  }
  export default defineComponent({
    name: "Header",
    props: {
      msg: {
        type: String,
        default: () => ""
      }
    },
    setup(props, context) {
      const router = useRoute();
      const store = useStore<IGlobalState>();
      const state: IState = reactive({
        locale: zhCN,
        selectedKeys: ["/"],
        allTime: 0
      });
      onMounted(() => {
        state.selectedKeys = [router.path];
        if (
          !store.state.Payload.allTime &&
          window.location.hash.includes("plan")
        ) {
          store.dispatch(types.GET_PLAN_LIST);
        }
      });
      watch(
        () => router.path,
        newValue => {
          state.selectedKeys = [newValue];
        }
      );
      watch(
        () => store.state.Payload.allTime,
        newValue => {
          state.allTime = newValue;
        }
      );
      const msgClick = () => {
        console.log(props.msg);
      };
      return {
        ...toRefs(state),
        msgClick
      };
    }
  });
</script>
